<template>
  <div class="play">
    <!-- 歌曲的播放页面 -->
    <audio
      ref="audio"
      :src="'https://music.163.com/song/media/outer/url?id='+$route.params.id+'.mp3'"
    ></audio>
    <div class="back" @click="back">&lt;返回</div>
    <div class="cdbox">
      <img
        :src="src"
        width="200px"
        @click="play"
        :class="isPlaying? 'move' : 'stop' "
      >
    </div>
  </div>  
</template>

<script>
export default {
  data() {
    return {
      src: '',
      // 音乐是否正在播放
      isPlaying: false
    }
  },
  created() {
    this.getMusic();
  },
  methods: {
    getMusic() {
      this.$http('/api/song/detail?ids='+this.$route.params.id)
        .then(res => {
          this.src = res.data.songs[0].al.picUrl;
        })
        .catch(err => {
          console.log(err);
        }
        )
    },
    // 播放音乐
    play() {
      // 切换播放状态
      this.isPlaying = !this.isPlaying;
      if(this.$refs.audio.paused) {
        this.$refs.audio.play();
      }else {
        this.$refs.audio.pause();
      }
    },
    back() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
  .play {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: rgba(0,0,0,0.5);
  }
  .back {
    color: #fff;
  }
  .cdbox {
    width: 300px;
    height: 300px;
    background-image: url('../../static/img/disc-ip6.png');
    background-repeat: no-repeat;
    background-size: 300px;
    margin-top: 60px;
    margin-left: 50%;
    position: relative;
    left: -150px;
    padding: 50px;
  }
  .cdbox img {
    border-radius: 50%;
    transform: rotate(0deg);
  }
  .move {
    animation: circle 15s linear infinite;
    /* transform: rotate(0deg); */
  }
  .stop {
    /* transform: rotate(0deg); */
    animation: circle 15s linear infinite;
    animation-play-state: paused;
  }
  @keyframes circle {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>